// 项目的根组件，一切组件的根基
// App被引入到了index.js,渲染到public/index.html文件中id为root的div

// 概念：在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用

import { useEffect, useState } from "react";


function Son() {
  // 1. 渲染时开启一个定时器
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器执行中。。。')
    }, 1000);

    return () => {
      // 清除副作用，最常见的执行时机就是组件卸载
      clearInterval(timer)
    }
  }, [])
  return <div>this is son</div>
}

function App19() {
  // 通过条件渲染模拟组件渲染
  const [show, setShow] = useState(true)

  return (
    <div className="App">
      {show && <Son/>}
      <button onClick={() => setShow(false)}>卸载Son组件</button>
    </div>
  )
}

export default App19
